﻿@{
    ViewBag.Title = "聊天室";
}

@section Style{
    @Styles.Render("~/Content/Flat/Css/base")
}

@section Script{
    @Scripts.Render("~/Content/Flat/Js/Chart")
}
<!--main content start-->
<section id="main-content">
    <section class="wrapper site-min-height">
        <!-- page start-->
        <div class="chat-room">
            <aside class="left-side">
                <div class="user-head">
                    <i class="fa fa-comments-o"></i>
                    <h3>聊天室</h3>
                </div>
                <ul class="chat-list">
                    <li class="">
                        <a class="lobby"href="@Url.Action("Flat","Themes",new { id = "lobby.html"})">
                            <h4>
                                <i class="fa fa-list"></i>
                                Lobby
                            </h4>
                        </a>
                    </li>
                    <li>
                        <a href="@Url.Action("Flat","Themes",new { id = "chat_room.html"})">
                            <i class="fa fa-rocket"></i>
                            <span>市场</span>
                            <i class="fa fa-times pull-right"></i>
                        </a>
                    </li>
                    <li class="active">
                        <a href="@Url.Action("Flat","Themes",new { id = "chat_room.html"})">
                            <i class="fa fa-rocket"></i>
                            <span>水分</span>
                            <i class="fa fa-times pull-right"></i>
                        </a>
                    </li>
                    <li>
                        <a href="@Url.Action("Flat","Themes",new { id = "chat_room.html"})">
                            <i class="fa fa-rocket"></i>
                            <span>设计</span>
                            <i class="fa fa-times pull-right"></i>
                        </a>
                    </li>
                    <li>
                        <a href="@Url.Action("Flat","Themes",new { id = "chat_room.html"})">
                            <i class="fa fa-rocket"></i>
                            <span>开发</span>
                            <i class="fa fa-times pull-right"></i>
                        </a>
                    </li>

                </ul>
                <ul class="chat-list chat-user">

                    <li>
                        <a href="#">
                            <i class="fa fa-circle text-success"></i>
                            <span>道奇</span>
                            <i class="fa fa-times pull-right"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-circle text-success"></i>
                            <span>迪奥</span>
                            <i class="fa fa-times pull-right"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-circle text-muted"></i>
                            <span>弗兰克</span>
                            <i class="fa fa-times pull-right"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-circle text-danger"></i>
                            <span>阿里内斯</span>
                            <i class="fa fa-times pull-right"></i>
                        </a>
                    </li>

                </ul>
                <footer>
                    <a class="chat-avatar" href="javascript:;">
                        <img alt="" src="/Content/Flat/img/mail-avatar.jpg">
                    </a>
                    <div class="user-status">
                        <i class="fa fa-circle text-success"></i>
                        里奥
                    </div>
                    <a class="chat-dropdown pull-right" href="javascript:;">
                        <i class="fa fa-chevron-down"></i>
                    </a>
                </footer>
            </aside>
            <aside class="mid-side">
                <div class="chat-room-head">
                    <h3>水温</h3>
                    <form action="#" class="pull-right position">
                        <input type="text" placeholder="搜索" class="form-control search-btn ">
                    </form>
                </div>
                <div class="group-rom">
                    <div class="first-part odd">史密斯</div>
                    <div class="second-part">道奇，你在家吗?</div>
                    <div class="third-part">12:30</div>
                </div>
                <div class="group-rom">
                    <div class="first-part">阿贾克斯</div>
                    <div class="second-part">道奇的请假单，情处理</div>
                    <div class="third-part">12:31</div>
                </div>
                <div class="group-rom">
                    <div class="first-part odd">康纳</div>
                    <div class="second-part">李，分享了一个文件</div>
                    <div class="third-part">12:32</div>
                </div>
                <div class="group-rom">
                    <div class="first-part">吉利奥</div>
                    <div class="second-part">oh sure. please send</div>
                    <div class="third-part">12:32</div>
                </div>
                <div class="group-rom">
                    <div class="first-part odd">康纳</div>
                    <div class="second-part">
                        <a href="#">search_scb_dialog.jpg</a> <span class="text-muted">46.8KB</span> <p>
                            <img src="/Content/Flat/img/chat-attach.jpg" alt="">
                        </p>
                    </div>
                    <div class="third-part">12:32</div>
                </div>
                <div class="group-rom">
                    <div class="first-part">吉利奥</div>
                    <div class="second-part">Fantastic job, love it :)</div>
                    <div class="third-part">12:32</div>
                </div>
                <div class="group-rom">
                    <div class="first-part odd">康纳</div>
                    <div class="second-part">Thanks</div>
                    <div class="third-part">12:33</div>
                </div>

                <footer>
                    <div class="chat-txt">
                        <input type="text" class="form-control">
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-white"><i class="fa fa-meh-o"></i></button>
                        <button type="button" class="btn btn-white"><i class=" fa fa-paperclip"></i></button>
                    </div>
                    <button class="btn btn-danger">发送</button>
                </footer>
            </aside>
            <aside class="right-side">
                <div class="user-head">
                    <a href="#" class="chat-tools btn-success"><i class="fa fa-cog"></i> </a>
                    <a href="#" class="chat-tools btn-key"><i class="fa fa-key"></i> </a>
                </div>
                <div class="invite-row">
                    <h4 class="pull-left">People</h4>
                </div>
                <ul class="chat-available-user">
                    <li>
                        <a href="@Url.Action("Flat","Themes",new { id = "chat_room.html"})">
                            <i class="fa fa-circle text-success"></i>
                            康纳
                            <span class="text-muted">3h:22m</span>
                        </a>
                    </li>
                    <li>
                        <a href="@Url.Action("Flat","Themes",new { id = "chat_room.html"})">
                            <i class="fa fa-circle text-success"></i>
                            乔纳森
                            <span class="text-muted">1h:2m</span>
                        </a>
                    </li>
                    <li>
                        <a href="@Url.Action("Flat","Themes",new { id = "chat_room.html"})">
                            <i class="fa fa-circle text-success"></i>
                            弗兰克
                            <span class="text-muted">2h:32m</span>
                        </a>
                    </li>
                    <li>
                        <a href="@Url.Action("Flat","Themes",new { id = "chat_room.html"})">
                            <i class="fa fa-circle text-danger"></i>
                            吉利奥
                            <span class="text-muted">3h:22m</span>
                        </a>
                    </li>
                    <li>
                        <a href="@Url.Action("Flat","Themes",new { id = "chat_room.html"})">
                            <i class="fa fa-circle text-warning"></i>
                            斯达福林
                            <span class="text-muted">1h:12m</span>
                        </a>
                    </li>
                    <li>
                        <a href="@Url.Action("Flat","Themes",new { id = "chat_room.html"})">
                            <i class="fa fa-circle text-muted"></i>
                            斯蒂夫
                            <!--<span class="text-muted">3h:22m</span>-->
                        </a>
                    </li>
                    <li>
                        <a href="@Url.Action("Flat","Themes",new { id = "chat_room.html"})">
                            <i class="fa fa-circle text-muted"></i>
                            康纳
                            <!--<span class="text-muted">3h:22m</span>-->
                        </a>
                    </li>
                </ul>
                <footer>
                    <a href="#" class="guest-on">
                        <i class="fa fa-check"></i>
                        开启访客模式
                    </a>
                </footer>
            </aside>
        </div>
        <!-- page end-->
    </section>
</section>
<!--main content end-->